# Button Group

## Examples


### Basic

```typescript
import React from 'react';

import Button from '@splunk/react-ui/Button';
import ButtonGroup from '@splunk/react-ui/ButtonGroup';


export default function Basic() {
    return (
        <ButtonGroup>
            <Button>One</Button>
            <Button>Two</Button>
            <Button>Three</Button>
        </ButtonGroup>
    );
}
```




## API


### ButtonGroup API

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| children | React.ReactNode | no |  | Must be `Button`. |
| elementRef | React.Ref<HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |





## Accessibility

ButtonGroup is a series of buttons visually placed together; it has no functional or semantic use. Confirm use case below to find the best component for implementation. 

- Single Select: any button in this group can be selected; actions are independent of one another. Refer to [Button](Button?section=a11y).
- Checkbox Select: Multiple buttons can be selected within the ButtonGroup; buttons are independent of one another. Refer to [Menu](Menu?section=a11y).
- Radio Select: Only one button can be selected within the ButtonGroup; actions revolve around one grouping. Refer to [RadioBar](RadioBar?section=a11y).